// ============================================================================
// Kexio Frontend Design Tokens (Global Theme)
// - Centralized style variables and mixins
// - Reference style: clean, modern, soft shadows, generous spacing
// - Only define tokens and helpers here; component skins live in index.scss
// ============================================================================

// ------------------------------
// CSS Variables (Runtime theming)
// ------------------------------
:root {
  // Brand & primary - 完全匹配原型
  --color-primary: #000000;              // primary: '#000000' 黑色
  --color-primary-hover: #333333;        // primary-hover: '#333333' 深灰色
  --color-primary-active: #222222;       // primary-active: '#222222' 深灰色
  --color-primary-weak: rgba(0, 0, 0, .05); // primary-weak: 'rgba(0, 0, 0, .05)' 淡黑背景

  // Neutral text - 完全匹配原型
  --text-primary: #333333;               // text-primary: '#333333' 深灰色文字
  --text-secondary: #666666;             // text-secondary: '#666666' 中等灰色文字
  --text-muted: #999999;                 // text-muted: '#999999' 浅灰色文字
  --text-placeholder: #a8b1c4;           // subtle

  // Backgrounds - 完全匹配原型
  --bg-page: #f5f5f5;                    // bg-page: '#f5f5f5' 页面背景
  --bg-panel: #ffffff;                   // bg-panel: '#ffffff' 卡片背景
  --bg-hover: #eeeeee;                   // bg-hover: '#eeeeee' 悬浮背景 - 完全匹配原型
  --bg-subtle: #f8fafc;                  // extra subtle

  // Borders - 完全匹配原型
  --border: #dddddd;                     // border: '#dddddd' 边框颜色 - 完全匹配原型
  --border-light: #eef2f7;               // light separators

  // Semantic colors
  --success: #22c55e;             // green-500
  --success-weak: rgba(34, 197, 94, .12);
  --warning: #f59e0b;
  --warning-weak: rgba(245, 158, 11, .12);
  --danger: #ef4444;
  --danger-weak: rgba(239, 68, 68, .12);
  --info: #3b82f6;
  --info-weak: rgba(59, 130, 246, .12);

  // Color aliases for consistency
  --color-success: #22c55e;       // alias for --success
  --color-warning: #f59e0b;       // alias for --warning
  --color-danger: #ef4444;        // alias for --danger
  --color-info: #3b82f6;          // alias for --info

  // Radius
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  // Shadows (soft)
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, .05);
  --shadow-md: 0 6px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 10px 20px rgba(15, 23, 42, .10);
  --shadow-hover: 0 12px 24px rgba(15, 23, 42, .12);
  --shadow-card: 0 8px 16px rgba(15, 23, 42, .06);

  // Spacing
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;

  // Layout paddings
  --container-padding: 20px;
  --card-padding: 20px;
  --input-padding-y: 10px;
  --input-padding-x: 12px;

  // Typography scale
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-2xl: 22px;

  // Motion
  --duration-fast: .15s;
  --duration-base: .25s;
  --duration-slow: .35s;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  // Z-index scale (for reference)
  --z-header: 1000;
  --z-sidebar: 900;
  --z-overlay: 1100;
}

// ------------------------------
// SCSS Variables (Legacy aliases)
// Provide aliases to minimize refactors in existing code
// ------------------------------

// Layout sizes
$sidebar-width: 240px;
$sidebar-collapsed-width: 64px;
$sidebar-width-mini: $sidebar-collapsed-width; // alias
$header-height: 60px;
$breadcrumb-height: 40px;

// Typography
$font-size-xs: var(--font-xs);
$font-size-sm: var(--font-sm);
$font-size-base: var(--font-base);
$font-size-md: var(--font-lg);
$font-size-lg: var(--font-xl);
$font-size-xl: var(--font-2xl);
$font-size-xxl: var(--font-2xl);
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// Spacing
$spacing-xs: var(--gap-xs);
$spacing-sm: var(--gap-sm);
$spacing-md: var(--gap-md);
$spacing-lg: var(--gap-lg);
$spacing-xl: var(--gap-xl);
$content-padding: var(--container-padding);
$card-padding: var(--card-padding);
$card-margin-bottom: 16px;
$card-header-margin-bottom: 12px;
$card-header-padding-bottom: 8px;
$card-body-padding: 16px;
$card-footer-padding-top: 12px;
$card-footer-margin-top: 12px;
$stat-card-padding: 16px;

// Colors (aliases)
$primary-color: var(--color-primary);
$primary-hover-color: var(--color-primary-hover);
$primary-light: var(--color-primary-weak);
$success-color: var(--success);
$white: #ffffff;
$bg-color: var(--bg-panel);
$text-primary: var(--text-primary);
$text-secondary: var(--text-secondary);
$text-placeholder: var(--text-placeholder);
$border-color: var(--border);
$border-color-light: var(--border-light);
$border-color-lighter: var(--border-light);

// Radius
$border-radius-base: var(--radius-md);
$border-radius-small: var(--radius-sm);
$border-radius-medium: var(--radius-md);
$border-radius-large: var(--radius-lg);
$border-radius-round: var(--radius-xl);
$border-radius-circle: 50%;
$border-radius-sm: $border-radius-small;
$border-radius-md: $border-radius-medium;
$border-radius-lg: $border-radius-large;

// Shadows
$shadow-base: var(--shadow-card);
$shadow-light: var(--shadow-sm);
$shadow-dark: var(--shadow-lg);
$shadow-sm: var(--shadow-sm);
$shadow-md: var(--shadow-md);
$shadow-lg: var(--shadow-lg);
$shadow-xl: var(--shadow-hover);
$box-shadow: $shadow-base;
$box-shadow-light: $shadow-light;
$box-shadow-dark: $shadow-dark;
$box-shadow-hover: var(--shadow-hover);

// Misc
$menu-item-height: 48px; // EP default-like

// Buttons
$btn-padding-y: 8px;
$btn-padding-x: 14px;
$btn-padding-y-sm: 6px;
$btn-padding-x-sm: 10px;
$btn-padding-y-lg: 12px;
$btn-padding-x-lg: 18px;

// ------------------------------
// Mixins (lightweight helpers)
// ------------------------------

@mixin clearfix() {
  &::after { content: ""; display: table; clear: both; }
}

@mixin border-radius($radius: $border-radius-base) {
  border-radius: $radius;
}

@mixin box-shadow($shadow: $shadow-base) {
  box-shadow: $shadow;
}

@mixin transition($props: all, $duration: var(--duration-base), $easing: var(--easing-standard)) {
  transition: $props $duration $easing;
}

// 浅色侧边栏主题变量 - 完全匹配原型黑色主题
:root {
  // 侧边栏浅色主题
  --sidebar-bg: #ffffff;                    // 白色背景
  --sidebar-text: #666666;                  // 默认灰色文字 (text-secondary)
  --sidebar-text-active: #000000;           // 激活黑色文字 (primary)
  --sidebar-text-hover: #333333;            // 悬浮深灰文字 (text-primary)  
  --sidebar-bg-active: rgba(0, 0, 0, 0.05); // 激活淡黑背景 (primary-weak)
  --sidebar-bg-hover: #f1f5f9;              // 悬浮浅灰背景
  --sidebar-radius: 8px;                    // 圆角 (rounded-md)
}

// 颜色变量（浅色简洁风格）- 完全匹配原型黑色主题
:root {
  // 主题色 - 更新为原型的黑色主题
  --el-color-primary: #000000;                      // 黑色主题
  --el-color-primary-light-3: #4d4d4d;             // 浅色变体
  --el-color-primary-light-5: #808080;             // 更浅变体
  --el-color-primary-light-7: #b3b3b3;             // 浅灰变体
  --el-color-primary-light-8: #cccccc;             // 淡灰变体
  --el-color-primary-light-9: #e6e6e6;             // 很淡变体
  --el-color-primary-dark-2: #000000;              // 深色变体（保持黑色）

  // 成功色
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;

  // 警告色
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;

  // 危险色
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;

  // 信息色
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;

  // 文本色
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;

  // 边框色
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;

  // 填充色
  --el-fill-color: #f7f9fc;
  --el-fill-color-light: #f9fbfd;
  --el-fill-color-lighter: #ffffff;
  --el-fill-color-extra-light: #ffffff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #ffffff;

  // 背景色
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f5f7fa;
  --el-bg-color-overlay: #ffffff;
}

// 布局变量
$sidebar-width: 240px;
$sidebar-collapsed-width: 64px;
$header-height: 60px;
$footer-height: 40px;
$breadcrumb-height: 40px;
$tabs-height: 40px;

// 层级变量
$z-index-navbar: 1000;
$z-index-sidebar: 1001;
$z-index-dropdown: 1002;
$z-index-modal: 2000;
$z-index-message: 3000;

// 阴影变量
$shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-dark: 0 2px 16px 0 rgba(0, 0, 0, 0.12);

// 过渡动画
$transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
$transition-fade: opacity 0.3s;
$transition-slide: transform 0.3s;

// 圆角变量
$border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-large: 6px;
$border-radius-round: 20px;
$border-radius-circle: 50%;

// 间距变量
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-xxl: 24px;

// 字体变量
$font-size-xs: 12px;
$font-size-sm: 13px;
$font-size-base: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$font-size-xxl: 24px;

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 行高变量
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 1.75;

// 常用混入
@mixin clearfix() {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}
